<template>
  <!-- 显示信息 -->
  <el-select v-model="showInfoValue" multiple collapse-tags collapse-tags-tooltip placeholder="选择" style="width: 200px" @visible-change="handleSelectVisible">
    <template #header>
      <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll"
      >选择显示地图元素</el-checkbox
      >
    </template>
    <span v-for="(item, index) in showInfoArr" :key="index" v-show="item.componentList.includes(name)">
      <el-option v-if="!item.children" :label="item.label" :value="item.value" :disabled="item.disabled" />
    </span>
    <template #footer>
      <span
        v-show="item.componentList && item.componentList.includes(name)"
        v-for="(item, index) in groupArr"
        :key="index"
        style="display: block; margin-bottom: 10px"
      >
        <el-cascader
          ref="cascaderRef"
          v-model="groupValue[index]"
          :options="item.children"
          :props="{ expandTrigger: 'hover' as const }"
          @change="handleCascaderChange"
        />
      </span>
    </template>
  </el-select>
</template>

<script setup lang="ts" name="selectShowInfo">
import { onMounted, ref, watch } from "vue";
import { showInfoArr, showOtherArr } from "./index";
import { Cell, Edge, Graph } from "@antv/x6";
// import { useDictionaryStore } from "@/store/modules/dictionary";
// import { useCanvansMapStore } from "@/store/modules/canvansMap";
// import { showResourcesPath, showPathGroup } from "@/utils/antvX6/drawResourcesPath";
// import { useTopologyViewStore } from "@/store/modules/topologyView";
const groupArr = ref<any[]>(JSON.parse(JSON.stringify(showOtherArr))); // 分组联级信息结果
const groupValue = ref<Array<number>[]>([]); // 分组联级信息结果
const showInfoValue = ref<number[]>([]); // 单选信息结果
const checkAll = ref<boolean>(false);
const indeterminate = ref<boolean>(false); // 显示信息全选和非全选状态
// const dictionaryStore = useDictionaryStore();
// const topologyViewStore = useTopologyViewStore();
// const canvansMapStore = useCanvansMapStore();
const cascaderRef = ref()

const props = defineProps<{
  graph: Graph;
  name: string; // 所属组件名称
}>();

// 默认动态数据插入项
class dItem {
  componentList: string[] = ["mapHead", "canvasDrawer"];
  children: any[] = [
    {
      value: 0,
      label: "",
      children: [
        {
          value: 0,
          label: "请选择"
        },
      ],
    },
  ];
  constructor(componentList: string[], label: string, value: number) {
    this.componentList = componentList;
    this.children[0].value = value;
    this.children[0].label = label;
  }
}

// watch(() => topologyViewStore.mapIds, () => {
//   groupValue.value.forEach(item => {
//     if(item[0] === 7) item[1] = 0
//   })
// })

// watch(() => dictionaryStore.pathGroupList, (newValue) => {
//   groupArr.value.forEach((item, index) => {
//     item.children.forEach((subItem: any) => {
//       if(subItem.value === 7) {
//         subItem.children = [...newValue, {value: 0, label: '请选择'}]
//       }
//     })
//   })
// })

// 监听显示信息选中/取消
watch(showInfoValue, (_val: number[]) => {
  if (_val.length === 0) {
    checkAll.value = false;
    indeterminate.value = false;
  } else if (_val.length === showInfoArr.length) {
    checkAll.value = true;
    indeterminate.value = false;
  } else {
    indeterminate.value = true;
  }

  // 显示隐藏节点名称
  changeNodeData("isShowLabel", _val.includes(1));
  changeAreaData("isShowLabel", _val.includes(1));

  // 显示隐藏节点
  changeNodeData("isShowNode", _val.includes(2));

  // 显示隐藏节点站点
  changeNodeData("isShowStation", _val.includes(3));

  // 显示隐藏边
  changeEdgeData("isShowEdge", _val.includes(4));

  // 显示隐藏边名称
  changeEdgeData("isShowEdgeLabel", _val.includes(5));

  // 显示隐藏区域
  changeAreaData("isShowNode", _val.includes(6));

  // 显示隐藏黑白地图
  (props.graph.view.background as HTMLElement).style.opacity = _val.includes(7) ? "1" : "0";

  // 显示隐藏车辆资源
  // showResourcesPath(_val.includes(8));

  // 显示隐藏目标线路

  // 显示隐藏作业点

  // 显示隐藏机器人图标
  changeAgvNodeData("showAGV", _val.includes(11));

  // 显示隐藏节点/区域名称弹窗
  changeNodeData("isShowToolTip", _val.includes(12));
  changeAreaData("isShowToolTip", _val.includes(12));

  // 显示隐藏路径资源
  // showPathGroup(_val.includes(13));

  // 显示隐藏红色删除图标
  // canvansMapStore.setShowButtonRemove(_val.includes(14))
});

onMounted(() => {
  // const pathGroupItem = new dItem(["mapHead"], "边组合", 7);
  // pathGroupItem.children[0].children.unshift(...dictionaryStore.pathGroupList);
  // groupArr.value.push(pathGroupItem);
  handleCheckAll(true);
});

// 解决联级组件选择相同选项时不主动消失的问题
function handleSelectVisible(e:boolean) {
  !e && cascaderRef.value && cascaderRef.value[0]?.togglePopperVisible(false)
}

// 全选
function handleCheckAll(_val: boolean) {
  indeterminate.value = false;
  if (_val) {
    showInfoValue.value = showInfoArr.map((item) => item.value);
  } else {
    showInfoValue.value = showInfoArr.filter((item) => item.disabled).map((item) => item.value);
  }
  changeEdgeColor([])
  // 底部多层级重置为第一选项
  groupValue.value = [];
  groupArr.value.forEach((item: any) => {
    const firstChildren = item.children[0];
    groupValue.value.push([
      firstChildren.value,
      firstChildren.children[item instanceof dItem ? firstChildren.children.length - 1 : 0].value,
    ]);
  });
}

// 联级选择回调
function handleCascaderChange(e: Array<number>) {
  switch (e[0]) {
    case 7:
      changeGroupPath(e[1]);
      break;
    case 8:
      changeAgvNodeData("scaleSize", e[1]);
      break;
    case 9:
      changeNodeData("fontSize", e[1]);
      break;
    case 10:
      changeNodeData("fontColor", e[1]);
      break;

    default:
      break;
  }
}

const changeEdgeColor = (edgeIds:number[], color?:string) => {
  const nodeEdges = props.graph.getEdges()
  const resultList: any[] = nodeEdges.map((item: Cell) => {
    item.setAttrByPath('line/stroke','#2A82E4')
    if(edgeIds.includes(item.getData()?.edgeId)) {
      return item
    }
  }).filter(item => item)
  resultList.forEach((item: Cell) => {
    item.setAttrByPath('line/stroke',color)
  })
}
// 改变组合边
function changeGroupPath(id:number) {
  const children = groupArr.value[0].children[0].children
  children.forEach((item: any) => {
    if(id === 0) {
      changeEdgeColor([])
    }else if(item.id === id) {
      changeEdgeColor(item.edges.map((item: any) => item.edgeId), '#67C23A')
      props.graph.select(item.edges.map((item:any) => item.name))
      const centerId = item.edges[0].name
      const centerNode = (props.graph.getCellById(centerId) as Edge).getSourceNode()
      if(centerNode) {
        const centerPoint = centerNode.position()
        props.graph.centerPoint(centerPoint.x, centerPoint.y)
      }
    }
  })
}

// 改变AGV节点元素
function changeAgvNodeData(key: string, value: any) {
  const agvList = props.graph.getNodes().filter((item) => item.shape === "node-agv");
  agvList.forEach((item) => item.prop(key, value));
}

// 改变节点元素
function changeNodeData(key: string, value: any) {
  const pointList = props.graph.getNodes().filter((item) => item.shape === "node-point");
  pointList.forEach((item) => item.prop(key, value));
}

// 改变区域节点元素
function changeAreaData(key: string, value: any) {
  const nodeList = props.graph.getNodes().filter((item) => item.shape === "node-area");
  nodeList.forEach((item) => item.prop(key, value));
}

// 改变边元素
function changeEdgeData(key: string, value: any) {
  const pointList = props.graph.getEdges().filter((item) => item.shape === "edge");
  pointList.forEach((item) => {
    if (key === "isShowEdge") {
      item.setVisible(value);
    } else if (key === "isShowEdgeLabel") {
      const label = JSON.parse(JSON.stringify(item.getLabelAt(0)));
      label.attrs.txt.opacity = value ? 1 : 0;
      item.setLabelAt(0, label);
    }
  });
}
defineExpose({
  handleCheckAll
})
</script>

<style scoped lang="scss"></style>
